<template>
   <!-- This footer should be hidden by default and shown when there are todos -->
    <footer class="footer" v-if="list.length > 0">
      <!-- This should be `0 items left` by default -->
      <span class="todo-count"><strong>{{count}}</strong> item left</span>
      <!-- Remove this if you don't implement routing -->
      <ul class="filters">
        <li>
          <a class="selected" href="#/">All</a>
        </li>
        <li>
          <a href="#/active">Active</a>
        </li>
        <li>
          <a href="#/completed">Completed</a>
        </li>
      </ul>
      <!-- Hidden if no completed items are left ↓ -->
      <button class="clear-completed" @click="clearFn">Clear completed</button>
    </footer>
</template>

<script>
import { computed, ref } from 'vue'
export default {
    emits: ['clear'],
    props: {
        list: {
            type: Array,
            required: true
        }
    },
    setup(props, {emit}) {
      const count = computed(() => {
        return props.list.filter(item => !item.done).length
      })
      const clearFn = () => {
        emit('clear')
      }
      return {
        count,
        clearFn
      }
    }
    
}
</script>

<style>

</style>